<template>
	<div ref="theMapChart" :style="{ height: props.height, width: props.width }"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import geoJson from './map.json'

type Props = {
	height?: string
	width?: string
}
let props = withDefaults(defineProps<Props>(), {
	height: '100%',
	width: '100%',
})


let theMapChart = ref()

// 12区划点位
let chinaGeoCoordMap = {
    南京市:[118.80,32.06],
	玄武区: [118.792199,32.050678],
	秦淮区: [118.786088,32.033818],
	建邺区: [118.732688,32.004538],
	鼓楼区: [118.769739,32.066966],
	浦口区: [118.625307,32.05839],
	栖霞区: [118.808702,32.102147],
	雨花台区: [118.77207,31.995946],
	江宁区: [118.850621,31.953418],
	六合区: [118.85065,32.340655],
	溧水区: [119.028732,31.653061],
    高淳区: [118.87589,31.327132],
}
let chinaDatas = [
    [
    {
			name: '南京市',
			value: 0,
		},
    ],
	[
		{
			name: '玄武区',
			value: 0,
		},
	],
	[
		{
			name: '秦淮区',
			value: 0,
		},
	],
	[
		{
			name: '建邺区',
			value: 0,
		},
	],
	[
		{
			name: '鼓楼区',
			value: 0,
		},
	],
	[
		{
			name: '浦口区',
			value: 0,
		},
	],
	[
		{
			name: '栖霞区',
			value: 0,
		},
	],
	[
		{
			name: '雨花台区',
			value: 0,
		},
	],
	[
		{
			name: '江宁区',
			value: 0,
		},
	],
    [
		{
			name: '六合区',
			value: 0,
		},
	],
	[
		{
			name: '溧水区',
			value: 0,
		},
	],
	[
		{
			name: '高淳区',
			value: 0,
		},
	],
]

const convertData = (data) => {
	var res: any = []
	for (var i = 0; i < data.length; i++) {
		var dataItem = data[i]
		var fromCoord = chinaGeoCoordMap[dataItem[0].name]
		var toCoord = [118.80,32.06] //中心点地理坐标
		if (fromCoord && toCoord) {
			res.push([
				{
					coord: fromCoord,
					value: dataItem[0].value,
				},
				{
					coord: toCoord,
				},
			])
		}
	}
	return res
}
let myChart = ref()
// 重新调整大小
const toReszie = () =>{
	myChart.value.resize()
}
const init = () => {
	// 处理数据
    let json:any = geoJson
    echarts.registerMap('nanjing', json);
	let series: any = []
	;[['南京市', chinaDatas]].forEach(function (item: any, i) {
		console.log(item)
		series.push(
			{
				type: 'lines',
				zlevel: 2,
				effect: {
					show: true,
					period: 4, //箭头指向速度，值越小速度越快
					trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
					symbol: 'arrow', //箭头图标
					symbolSize: 5, //图标大小
				},
				label:{
					normal:{
						show:false,
						fontSize:0
					}
				},
				lineStyle: {
					normal: {
                        color:"#85D9F9",
						width: 1, //尾迹线条宽度
						opacity: 1, //尾迹线条透明度
						curveness: 0.3, //尾迹线条曲直度
					},
				},
				data: convertData(item[1]),
			},
			{
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					//涟漪特效
					period: 4, //动画时间，值越小速度越快
					brushType: 'stroke', //波纹绘制方式 stroke, fill
					scale: 4, //波纹圆环最大限制，值越大波纹越大
				},
				label: {
					normal: {
						show: false,
						position: 'right', //显示位置
						offset: [5, 0], //偏移设置
						formatter: function (params) {
							//圆环显示文字
							return params.data.name
						},
						fontSize: 13,
					},
					emphasis: {
						show: true,
					},
				},
				symbol: 'image://https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697700057613_af941162.png',
				symbolSize: function (val) {
					return 10 //圆环大小
				},
				itemStyle: {
					normal: {
						show: false,
						color: '#f00',
					},
				},
				data: item[1].map(function (dataItem) {
					return {
						//在这里定义你所要展示的数据
						name: dataItem[0].name,
						value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
					}
				}),
			},
			//中心点
			{
				type: 'scatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					period: 4,
					brushType: 'stroke',
					scale: 4,
				},
				label: {
					normal: {
						show: true,
						position: 'right',
						//offset:[5, 0],
						color: '#0f0',
						formatter: '{b}',
						textStyle: {
							color: '#0f0',
						},
					},
					emphasis: {
						show: true,
						color: '#f60',
					},
				},
				symbol: 'image://https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697700007773_84f3c4b5.png',
				symbolSize: 40,
				data: [
					{
						name: item[0],
						value: chinaGeoCoordMap[item[0]].concat([10]),
					},
				],
			}
		)
	})
	//
	let chartDom = theMapChart.value
	myChart.value = echarts.init(chartDom)
	let option
	option = {
        backgroundColor:"",
		tooltip: {
			show:false,
			trigger: 'item',
			backgroundColor: 'rgba(166, 200, 76, 0.82)',
			borderColor: '#FFFFCC',
			showDelay: 0,
			hideDelay: 0,
			enterable: true,
			transitionDuration: 0,
			extraCssText: 'z-index:100',
			formatter: function (params, ticket, callback) {
				console.log('fff',params,ticket)
				//根据业务自己拓展要显示的内容
				var res = ''
				var name = params.name
				var value = params.value[params.seriesIndex + 1]
				res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
				return res
			},
		},
		// backgroundColor: '#013954',
		visualMap: {
			//图例值控制
			min: 0,
			max: 1,
			calculable: true,
			show: false,
			color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
			textStyle: {
				color: '#fff',
			},
		},
		geo: {
			map: 'nanjing',
			zoom: 1.2,
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1.2, //缩放最小大小
              max: 6, //缩放最大大小
            },
			label: {
				emphasis: {
					show: false,
				},
			},
			roam: true, //是否允许缩放
			itemStyle: {
				normal: {
					color: '#588EE0', //地图背景色
					borderColor: '#5E9BF6', //省市边界线00fcff 516a89
					borderWidth: 1,
				},
				emphasis: {
					color: '#5E9BF6', //悬浮背景
                    borderColor: '#588EE0', //省市边界线00fcff 516a89
				},
			},
		},
		series: series,
	}

	option && myChart.value.setOption(option)
}

onMounted(() => {
	init()
})
defineExpose({toReszie})
</script>
<style scoped lang="scss"></style>
